import { pageDesignModel } from '@/models/pageDesignModel'
import ImageDragAble from '@/pages/PageDesign/components/ImageDragAble'
import ImageItemPreview from '@/pages/PageDesign/components/ImageItemPreview'
import ImageItemSetting from '@/pages/PageDesign/components/ImageItemSetting'
import { Button, Card, Divider } from 'antd'
import { observer } from 'mobx-react-lite'
import { useRef } from 'react'
import { DndProvider, useDrop } from 'react-dnd'
import { HTML5Backend } from 'react-dnd-html5-backend'
import styled from 'styled-components'
import { BaseItemType, ImageItemType } from '../../../types/pageDesign'

/* ******************* 素材容器部分 ******************* */
const MaterialContainerDiv = styled(Card)`
  overflow: auto;
  min-height: 400px;
  height: 80vh;
`
const MaterialContainerGroup = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
`
/**
 * 素材容器
 * @constructor
 */
const MaterialContainer = () => {
  return (
    <MaterialContainerDiv title="组件库">
      <Divider orientation="left" dashed plain>
        展示组件
      </Divider>
      <MaterialContainerGroup>
        <ImageDragAble />
        <ImageDragAble />
        <ImageDragAble />
        <ImageDragAble />
        <ImageDragAble />
        <ImageDragAble />
      </MaterialContainerGroup>
      <Divider orientation="left" dashed plain>
        表单组件
      </Divider>
      <MaterialContainerGroup>
        <ImageDragAble />
      </MaterialContainerGroup>
      <Divider orientation="left" dashed plain>
        活动组件
      </Divider>
      <MaterialContainerGroup>
        <ImageDragAble />
      </MaterialContainerGroup>
      <Divider orientation="left" dashed plain>
        支付组件
      </Divider>
      <MaterialContainerGroup>
        <ImageDragAble />
      </MaterialContainerGroup>
    </MaterialContainerDiv>
  )
}

/* ******************* 预览容器部分 ******************* */

const ItemWrapper = styled.div`
  z-index: 100;
  border: #7aaaee dashed 5px;
`
const PreView = (item: BaseItemType, ref) => {
  let el = <></>
  let [{ is }, drop] = useDrop({

  })
  switch (item.type) {
    case 'image':
      el = <ImageItemPreview key={item.id} {...(item as ImageItemType)} />
      break
  }
  if (item.id === pageDesignModel.currentItem?.id) return <ItemWrapper>{el}</ItemWrapper>
  return el
}
/**
 * 预览容器
 * @constructor
 */
const PreviewContainer = observer(() => {
  const ref = useRef<HTMLDivElement>(null)
  const [{ isOver }, drop] = useDrop({
    accept: 'page',
    collect: (monitor) => monitor.isOver(),
    drop: (item) => pageDesignModel.addPageItem(item as BaseItemType),
    hover: (item, monitor) => {
      //异常处理判断
      if (!ref.current) {
        return
      }
      //如果不做以下处理，则卡片移动到另一个卡片上就会进行交换，下方处理使得卡片能够在跨过中心线后进行交换.
      //获取卡片的边框矩形
      const hoverBoundingRect = ref.current.getBoundingClientRect()
      //获取X轴中点
      const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2
      //获取拖拽目标偏移量
      const clientOffset = monitor.getClientOffset()
      console.log(hoverBoundingRect.top, clientOffset?.y)
      const hoverClientY = clientOffset.y - hoverBoundingRect.top
      // 从上往下放置
      if (hoverClientY < hoverMiddleY) {
        return
      }
      // 从下往上放置
      if (hoverClientY > hoverMiddleY) {
        return
      }
    },
  })
  drop(ref)
  return (
    <MaterialContainerDiv ref={ref}>
      {pageDesignModel.pageData.map((value) => (
        <PreView item={value} ref={ref} />
      ))}
    </MaterialContainerDiv>
  )
})

/* ******************* 设置容器部分 ******************* */
const getSetting = (item: BaseItemType) => {
  switch (item.type) {
    case 'image':
      return <ImageItemSetting key={item.id} />
  }
}
/**
 * 设置容器
 * @constructor
 */
const SettingContainer = observer(() => {
  const { currentItem } = pageDesignModel
  if (currentItem === undefined) return <div>请选择一个组件进行设置！</div>
  return (
    <Card title="组件设置" extra={<Button>删除</Button>}>
      {getSetting(currentItem)}
    </Card>
  )
})

/* ******************* 页面 ******************* */
const PageDesignContainer = styled.div`
  display: grid;
  grid-template-columns: 30% 35% 35%;
  grid-column-gap: 10px;
`
const PageDesign = () => {
  return (
    <DndProvider backend={HTML5Backend}>
      <PageDesignContainer>
        <MaterialContainer />
        <PreviewContainer />
        <SettingContainer />
      </PageDesignContainer>
    </DndProvider>
  )
}

export default observer(PageDesign)
